//搜索
'use strict';
import React,{Component} from 'react';
import Util from '../common/util';
import styles from '../style/styles';
import Icon from 'react-native-vector-icons';
import GoodsList from '../goods/goodsList';
import Toast from '../common/ToastUtil';
import {
    View,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView
} from 'react-native';
export default class search extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            searchKey:'',
        };
      }

    isHeader(){
        return null;
        //(<View style={{height:20,width:Util.size.width,backgroundColor:"#f65061"}}></View>)
    }

    _pop() {
        let that=this;
        that.props.navigator.pop();
    }

    search(){
        let that = this;
        if(this.state.searchKey==null||this.state.searchKey==''){
            Toast.show('请先输入关键字')
        }else{
            that.props.navigator.push({
                component:GoodsList,
                passProps:{
                    title:this.state.searchKey,
                    key_words:this.state.searchKey
                }
            })
        }

    }

    searchHeader(){
        let that = this;
        let searchKey = that.state.searchKey;
        return(
            <View>
                {that.isHeader()}
                <View style={styles.search_header}>
                    <TouchableOpacity style={styles.search_back} onPress={()=>this._pop()}>
                        <Icon name={'ios-arrow-back'} size={30} color="#fff" />
                    </TouchableOpacity>
                    <View style={styles.search_wrap}>
                        <Icon name={'ios-search-outline'} size={20} color={'#9f9f9f'} style={styles.search_icon}/>
                        <TextInput
                            style={styles.search_input}
                            placeholder={'请输入搜索关键词'}
                            underlineColorAndroid={'transparent'}
                            onChangeText={(text)=>that.setState({searchKey:text})}
                        />
                    </View>
                    <TouchableOpacity style={styles.search_btn} onPress={()=>this.search()}>
                        <Text style={styles.search_txt}>搜索</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }


    //热搜
    //hotSearch(){
    //    let that= this;
    //    let hotSearchKey = that.state.hotSearchKey;
    //    let rows;
    //    let list=[];
    //    for(let item of hotSearchKey){
    //        rows=(
    //            <TouchableOpacity style={styles.hot_search_btn} key={item} onPress={()=>this.search(item)}>
    //                <Text style={styles.hot_search_txt}>{item}</Text>
    //            </TouchableOpacity>
    //        )
    //        list.push(rows)
    //    }
    //    return(
    //        <View style={styles.hot_search_wrap}>
    //            <ScrollView
    //                style={styles.hot_search_scrollview}
    //                horizontal={true}
    //                showsHorizontalScrollIndicator={false}
    //            >
    //                <Text style={styles.hot_txt}>热搜</Text>
    //                {list}
    //            </ScrollView>
    //        </View>
    //    );
    //}
    //
    ////历史搜索
    //hisSearch(){
    //    let that= this;
    //    let hisSearchKey = that.state.hisSearchKey;
    //    let rows;
    //    let list=[];
    //    for(let item of hisSearchKey){
    //        rows=(
    //            <TouchableOpacity key={item} style={styles.his_list} onPress={()=>this.search(item)}>
    //                <Text style={styles.hot_search_txt}>{item}</Text>
    //            </TouchableOpacity>
    //        )
    //        list.push(rows)
    //    }
    //    return(
    //        <View style={styles.his_search_wrap}>
    //            <View style={styles.his_txt_wrap}>
    //                <Text style={styles.his_txt}>历史搜索</Text>
    //            </View>
    //            <View style={styles.his_list_wrap}>
    //                {list}
    //            </View>
    //        </View>
    //    );
    //}


    render(){
        return(
            <View style={{flex:1,}}>
                {this.searchHeader()}
                {
                    //<ScrollView style={styles.bg_scrollview}>
                    //    {this.hotSearch()}
                    //    {this.hisSearch()}
                    //</ScrollView>
                }


            </View>
        )
    }
}